<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>app注册人数统计</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--<link rel="stylesheet" type="text/css" href="../bootstrap/dist/css/bootstrap.min.css"/>-->
		<link rel="stylesheet" type="text/css" href="../bootstrap/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../new_css/bootstrap-datetimepicker.min.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/public.css" />-->
	</head>
	<style type="text/css">
		.remove {
			cursor: pointer;
		}
		
		.remove:hover {
			color: red;
		}
		
		.pagination span {
			font: 14px/34px "";
			padding: 0 5px;
		}
		
		.form-control {
			display: inline-block;
			width: 150px;
		}
		
		.search {
			width: 155px;
		}
		
		.header {
			/*border-bottom: 1px solid #fefefe;*/
		}
		
		.header span {
			padding: 0 5px;
		}
		
		.table_cla {
			height: 560px;
		}
		.highcharts-credits{
			display: none;
		}
	</style>

	<body>
		<div id="app" style="width: 100%; margin: 0 auto;padding:0 20px;">
			<div class="header" style="margin-top: 20px;">
				<span>开始时间:</span><input class="time-input form-control" type="text" autocomplete="off" id="datetimepicker" v-model="start">
				<span>结束时间:</span><input class="time-input form-control" type="text" autocomplete="off" id="datetimepicker1" v-model="end">
				<!--<select name="" class="form-control" v-model="area_model">
					<option value="">请选择小区</option>
					<option v-for="index in area" :value="index.areaid" v-text="index.areaname"></option>
				</select>-->
				<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal_area">选择小区</button>
				<button id="search_text" type="button" class="btn btn-info " data-dismiss="modal" @click="search('')">搜索</button>
				<!--<button type="button" class="btn btn-info" data-dismiss="modal" @click="addMensuo">增加</button>-->
			</div>
			<div style="margin-top: 20px;" class="table_cla" id="table_cla">

			</div>
			<div style="text-align: center;">
				<p v-for="item in app_text">
					{{item.areaname}}:本区间APP注册人数： {{item.count1}}人, 共 {{item.count}} 人
				</p>
			</div>
			<!-- 模态框（Modal）选择小区-->
			<div class="modal fade" id="myModal_area" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">选择小区</h4>
						</div>
						<div class="modal-body">
							<p style="color: red;display: block;text-align: center;">建议小区数量尽量在10个以下，否则可能造成折线图效果不佳</p>
							<label class="checkbox-inline" v-for="item in area">
						      <input type="checkbox" :value="item.areaid" v-model="area_list">{{item.areaname}}
						    </label>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-success" data-dismiss="modal" @click="sure_area">确定</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 模态框（Modal）提示信息 -->
			<div class="modal fade" id="myModal_tips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">提示信息</h4>
						</div>
						<div class="modal-body" id="tips" v-text="tips_modal">

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>
<script src="../new_js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../new_js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../new_js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
<script src="../new_js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="../new_js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script>
	new Vue({
		el: '#app',
		data: {
			chart: "",
			val_te: "",
			urltest: "",
			userId: "",
			current: 1,
			fullname: "",
			showItem: 5,
			allpage: "",
			userName: "",
			jump: "",
			page_show: false,
			tips_modal: "",
			count_all: "",
			areaid: "",
			start: "",
			end: "",
			searchmain: "",
			panduan: "",
			merchantid: "",
			removeid: "",
			table: [{}, ],
			area_list: [],
			area: [],
			app_text: [],
			option: {
				title: {
					text: 'app注册人数统计'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: []
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: []
				},
				yAxis: {
					type: 'value'
				},
				series: [
				
				]
			},
			myChart: ""
		},
		//计算属性
		computed: {

		},
		created: function() {

		},
		mounted: function() {
			var that = this;
			var userId = sessionStorage.getItem("userId");
			if(userId == "" || userId == undefined || userId == null) {
				top.location.href = "../login.html";
			} else {
				that.urltest = sessionStorage.getItem("urltest");
				that.userId = sessionStorage.getItem("userId");
				that.fullname = sessionStorage.getItem("fullname");
				that.userName = sessionStorage.getItem("userName");
				that.datePickerInit();
				that.area_info();
				that.myChart = echarts.init(document.getElementById('table_cla'));
				//				that.aa()
			}

		},
		computed: {
			pages: function() {
				var pag = [];
				if(this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
					//总页数和要显示的条数那个大就显示多少条
					var i = Math.min(this.showItem, this.allpage);
					while(i) {
						pag.unshift(i--);
					}
				} else { //当前页数大于显示页数了
					var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
						i = this.showItem;
					if(middle > (this.allpage - this.showItem)) {
						middle = (this.allpage - this.showItem) + 1
					}
					while(i--) {
						pag.push(middle++);
					}
				}
				return pag
			},

		},
		methods: {
			//获取小区			
			area_info: function() {
				var that = this;
				var data = JSON.stringify({
					requestString: '',
					userId: that.userId,
					fullname: that.fullname
				});
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urltest + "/verify/financial/selectAreaNameList",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						if(msg.responseCode == 200) {
							that.area = JSON.parse(msg.returnString);
						} else {
							that.tips_modal = msg.resoponseDisp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});
			},
			//日期初始化
			datePickerInit: function() {
				var d, s;
				var self = this;
				self.start = s;
				$('#datetimepicker').datetimepicker({
					minView: "month", //选择日期后，不会再跳转去选择时分秒 
					language: 'zh-CN',
					format: 'yyyy-mm-dd',
					todayBtn: 1,
					autoclose: 1,
				});
				$('#datetimepicker1').datetimepicker({
					startDate: s,
					minView: "month", //选择日期后，不会再跳转去选择时分秒 
					language: 'zh-CN',
					format: 'yyyy-mm-dd',
					todayBtn: 1,
					autoclose: 1,
				});
				$('#datetimepicker').datetimepicker()
					.on('hide', function(ev) {						
						var value = $("#datetimepicker").val();
						self.start = value;
						$('#datetimepicker1').datetimepicker('setStartDate', self.start);						
						var start_1 =new Date(self.start).getTime();
						var end_1 = new Date(self.end).getTime();
						if(start_1>end_1){
							self.end = "";
						}						
					});
				$('#datetimepicker1').datetimepicker()
					.on('hide', function(ev) {
						var value = $("#datetimepicker1").val();
						self.end = value;

					});
			},
			search: function() {
				var that = this;
				if(that.start == '' || that.start == undefined || that.end == '') {
					that.tips_modal = "开始和结束时间必须选";
					$('#myModal_tips').modal('show');
					return
				} else if(that.area_list.length == 0) {
					that.tips_modal = "请至少选择一个小区";
					$('#myModal_tips').modal('show');
					return
				}
				$("#search_text").attr('disabled', true);
				$('#search_text').html('加载中.....')
				var data = JSON.stringify({
					requestString: JSON.stringify({
						areaidlist: that.area_list,
						startday: that.start,
						endday: that.end
					}),
					userId: that.userId,
					fullname: that.fullname
				});
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url:that.urltest +  "/verify/financial/selectAppCount",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						$("#search_text").attr('disabled', false);
						$('#search_text').html('搜索')
						if(msg.responseCode == 200) {
							var msg_data = JSON.parse(msg.returnString);													
							var x_data = msg_data.data;
							var y_data = msg_data.list;							
							for(var i = 0; i < y_data.length; i++) {
								y_data[i].data = y_data[i].data.map(Number);								
							}
							that.chart_canvas(x_data, y_data);
							that.app_text = msg_data.statistical
						} else {
							that.tips_modal = msg.resoponseDisp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						$("#search_text").attr('disabled', false);
						$('#search_text').html('搜索')
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});

			},
			chart_canvas: function(x_data, y_data) {
				this.chart = Highcharts.chart('table_cla', {
					chart: {
						type: 'line'
					},
					title: {
						text: 'app注册人数统计'
					},					
					xAxis: {
						categories: x_data
					},
					yAxis: {
						title: {
							text: '注册人数 (个)'
						}
					},
					plotOptions: {
						line: {
							dataLabels: {
								// 开启数据标签
								enabled: false
							},
							// 关闭鼠标跟踪，对应的提示框、点击事件会失效
							enableMouseTracking: true
						}
					},
					series: y_data
				});

			},
			//sure_area 确定所选小区
			sure_area: function() {
				//				console.log(this.area_list)
			}

		},

	})
</script>